import MyTable from "@/components/MyTable";
import SearchHeader from "@/components/SearchHeader";
import useTable from "@/hooks/useTable";
import { Button, Form, Popconfirm, message } from "antd";
import { useMemo} from "react";
import { useConfig } from "./form.config";

import ButtonGroup from "@/components/ButtonGroup";
import { useRequest } from "@umijs/max";
import { delComment, delReComment, getCommentPage } from "@/services/comment";

export default () => {
  const config = useConfig();
  const [form] = Form.useForm();
  const defaultFormValues = { content:''}

  const { tableProps, reset,searchBy, submit, refresh } = useTable(getCommentPage, {
    defaultFormValues: defaultFormValues,
    form: form,
    fieldParams:{//分页参数字段映射
      pageSize:'size',
      pageCurrent:'current',
      totalCount:'totalCount',
    }
  });
  const {run:del} = useRequest(delComment,{
    manual:true,
    onSuccess:()=>{
      message.success('删除成功')
      refresh()
    }
  })
  const {run:delReply} = useRequest(delReComment,{
    manual:true,
    onSuccess:()=>{
      message.success('删除成功')
      refresh()
    }
  })


  const columns = useMemo(() => {
    return [
      {
        title: "评论内容",
        dataIndex: "content",
      },
      {
        title: "操作",
        dataIndex: "action",
        align: "center",
        render: (_, record) => {
          const { id } = record || {};
          return (
            <ButtonGroup>
              <Popconfirm
                placement="topLeft"
                title={"确认删除吗？"}
                okText="确认"
                cancelText="取消"
                onConfirm={() => {
                  if(record.commentId){
                    delReply(id)
                  }else{
                    del(id)
                  }
                }}
              >
                <Button type="link">删除</Button>
              </Popconfirm>
            </ButtonGroup>
          );
        },
      },
    ];
  }, []);

  return (
    <>
      <div style={{ marginBottom: "16px" }}>
        <SearchHeader
          configs={config}
          form={form}
          onSubmit={submit}
          onReset={()=>{
            reset();
          }}
        />
      </div>
      <MyTable rowKey={"id"} columns={columns} {...tableProps} />
    </>
  );
};
